<!-- 注册 -->
<template>
<div id="outline">
    <h2>注册</h2>
    <div class="back">
    </div>
    <div class="myinput">
     <span>账号: </span> 
     <el-input class="input" placeholder="请输入账号" v-model="user" clearable>
     </el-input><br>
     <span>密码: </span>
     <el-input class="input" placeholder="请输入密码" v-model="password" clearable>
     </el-input>
     </div>

     <div class="anniu">
         <el-button type="primary" @click="register">确认</el-button>
         <el-button @click="cancel">取消</el-button>
     </div>
     
</div>
</template>
<script>
export default {
components: {},
data() {
return {
    user: '',
    password: ''
};
},
methods: {
    //密码账号发送
    register(){
     if(this.user=='' || this.password==''){
         this.$message({
            type: 'info',
            message: '请输入注册账号密码!'
          });
     }else{
         this.$axios.post('/register', {
        data: {
          username: this.user,
          password: this.password
        }
      }).then(res => {
        if(res.data.code == 200){
            this.$router.push("/")
        }else{
            this.$message({
            type: 'info',
            message: '注册失败!'
          });
        }
      })
     }
    },
    cancel() {
        this.$confirm('是否取消注册操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.user = "";
            this.pwd = "";
            this.$router.push("/");
        })
    }
},
created() {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
};
</script>
<style scoped lang='less'>
#outline{
    width: 100%;
    height: 100%;
    position: relative;
    background: url("") no-repeat;
    background-size: 100% 800px;
    background-color: rgb(70, 170, 170);
}
.back{
    width: 30%;
    height: 35%;
    background-color: #EFE4CF;
    border-radius: 10px;
    box-shadow: 5px 5px 50px #EFE4CF;
    opacity: 0.2;
    position: absolute;
    border: 2px solid #d3bf99;
    left: 33%;
    top: 20%;
}
.myinput{
    width: 35%;
    height: 25%;
    position: absolute;
    left: 30%;
    top: 20%;
    span{
        color: rgb(1, 196, 255);
    }
}
.input{
    width: 50%;
    opacity: 0.8;
    margin-top: 40px;
}
#outline>h2{
    font-size: 40px;
    color: rgb(7, 162, 252);
    margin: 0;
    padding-top: 6%;
    margin-left: -4%;
}
.anniu{ 
    width: 20%;
    height: 8%;
    position: absolute;
    left: 38%;
    top: 46%;
    button{
        margin: 0 20px;
    }
}

</style>